<template>
  <div>
    <!-- <div>
    <div>{{ drag ? "拖拽中" : "拖拽停止" }}</div>
    <draggable
      v-model="myArray"
      chosenClass="chosen"
      forceFallback="true"
      group="people"
      animation="1000"
      @start="onStart"
      @end="onEnd"
    >
      <transition-group>
        <div class="item" v-for="element in myArray" :key="element.id">
          {{ element.name }}
        </div>
      </transition-group>
    </draggable>
  </div> -->
    <div class="m20">
      <vueDraggable
        :dragData.sync="myArray"
        :group="group"
        :filter="filter"
      ></vueDraggable>
    </div>
    <div class="m20">
      <draggableGrid
        :dragData.sync="myArray"
        :group="group"
        :filter="filter"
      ></draggableGrid>
    </div>
    <div class="m20">
      <draggableRandom
        :dragLeftData="dragLeftData"
        :dragRightData="dragRightData"
        :group="group"
      >
        <div slot="leftContent">国内网站</div>
        <div slot="rightContent">你可以把左边的元素拖到右边</div>
      </draggableRandom>
    </div>
  </div>
</template>

<script>
// import draggable from "vuedraggable";
import vueDraggable from "@/components/draggable/draggable.vue";
import draggableGrid from "@/components/draggable/draggableGrid.vue";
import draggableRandom from "@/components/draggable/draggableRandom.vue";
export default {
  name: "default",
  data() {
    return {
      dragLeftData: [
        { id: 1, name: "www.itxst.com" },
        { id: 2, name: "www.jd.com" },
        { id: 3, name: "www.baidu.com" },
        { id: 4, name: "www.taobao.com" },
      ],
      dragRightData: [
        { id: 11, name: "www.google.com" },
        { id: 12, name: "www.msn.com" },
        { id: 13, name: "www.ebay.com" },
        { id: 14, name: "www.yahoo.com" },
      ],
      drag: false,
      //定义要被拖拽对象的数组
      myArray: [
        { people: "cn", id: 1, name: "www.itxst.com" },
        { people: "cn", id: 2, name: "www.baidu.com" },
        { people: "cn", id: 3, name: "www.taobao.com" },
        { people: "us", id: 4, name: "www.google.com", filterClass: "aaa" },
      ],
      filter: "aaa",
      group: "people",
    };
  },
  components: {
    vueDraggable,
    draggableGrid,
    draggableRandom,
  },
  created() {},
  methods: {
    //start ,end ,add,update, sort, remove 得到的都差不多
    onStart(evt) {
      this.drag = true;
      console.log(evt, "start...");
    },
    onEnd(evt) {
      console.log(evt, "end....");
      this.drag = false;
      evt.item; //可以知道拖动的本身
      evt.to; // 可以知道拖动的目标列表
      evt.from; // 可以知道之前的列表
      evt.oldIndex; // 可以知道拖动前的位置
      evt.newIndex; // 可以知道拖动后的位置
    },
  },
};
</script>

<style>
</style>
